<template>
  <el-dialog 
  v-model="dialogFormVisible" 
  title="修改社区人员信息" 
  top="30px"
  :close-on-click-modal="false"
  width="870px"
  >
    <el-form label-position="top" :model="form" class="form-info" >
        <div class="col-1">
            <el-form-item label="姓名" prop="name" style="width: 250px;">
                <el-input v-model="form.name"/>
            </el-form-item>
            <el-form-item label="年龄" prop="old">
                <el-input v-model="form.old" style="width: 250px;"/>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="form.sex">
                <el-radio label="男">男</el-radio>
                <el-radio label="女">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="类型" prop="type">
                <el-radio-group v-model="form.type">
                <el-radio label="业主">业主</el-radio>
                <el-radio label="住户">住户</el-radio>
                <el-radio label="租户">租户</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否居住此社区" prop="live">
                <el-radio-group v-model="form.live">
                <el-radio label="是">是</el-radio>
                <el-radio label="否">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </div>
        <div class="col-2">
            <el-form-item label="电话" prop="telephone" style="width: 250px;">
                <el-input v-model="form.telephone"/>
            </el-form-item>
            <el-form-item label="地址" prop="address">
                <el-input v-model="form.address"/>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input
                v-model="form.remark"
                maxlength="40"
                :rows="6"
                placeholder="Please input"
                show-word-limit
                type="textarea"
                />
            </el-form-item>
            <el-form-item style="float: right;">
                <el-button type="primary" @click="submitEditInfo">修改</el-button>
            </el-form-item>
        </div>
    </el-form>

  </el-dialog>
</template>

<script>
import { ElMessage } from "element-plus";

    export default {
        data() {
            return {
                dialogFormVisible: false,
                id:'',
                operator:'',
                form: {
                    name: '',
                    old: '',
                    sex: '',
                    address:'',
                    telephone:'',
                    live:'',
                    type:'',
                    remark:'',
                },
            };
        },
        methods: {
            //显示对话框并显示信息
            dialogShow(data){
                this.dialogFormVisible=true;
                this.id=data.id;
                this.form.name=data.name,
                this.form.old=data.old,
                this.form.sex=data.sex,
                this.form.address=data.address,
                this.form.telephone=data.telephone,
                this.form.live=data.live,
                this.form.type=data.type,
                this.form.remark=data.remark,
                this.getEditPersonnelInfo();
            },
            //提交修改信息
            submitEditInfo(){
                var that = this;
                let params = {
                    id:this.id,
                    name:this.form.name,
                    old:this.form.old,
                    sex:this.form.sex,
                    address:this.form.address,
                    telephone:this.form.telephone,
                    live:this.form.live,
                    type:this.form.type,
                    remark:this.form.remark,
                    operator:JSON.parse(sessionStorage.getItem('staff')).name
                };
                this.axios
                .post("/community/edit", params)
                .then(function(){
                    that.dialogFormVisible = false;
                    ElMessage({type: 'success', message: "修改成功"});
                    that.$emit("updateData");
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            
        },
        mounted(){

        }
    };
</script>
<style scoped>

.form-info{
    display: flex;
    justify-content: center;
}
.col-1{
  width:340px;
}
.col-2{
  width: 380px;
}
</style>
